import { Outlet, useNavigate, useLocation } from "react-router-dom";
// import { router } from '../../router'
import { TabBar, NavBar } from 'antd-mobile';
import {
    AppOutline,
    UnorderedListOutline,
} from 'antd-mobile-icons'
// import Index from "../home";
// import Test from "../home/test";
// export default function App() {
//     return (
//         <div>
//             <Routes>
//                 <Route path="/" element={<Layout />}>
//                     <Route index element={<Home />} />
//                     <Route path="about" element={<About />} />
//                     <Route path="dashboard" element={<Dashboard />} />
//                     <Route path="*" element={<NoMatch />} />
//                 </Route>
//                 <Route path="index" element={<Index />} />
//                 <Route path="test" element={<Test />} />
//             </Routes>
//         </div>
//     );
// }

export default function Login() {
    const navigate = useNavigate();
    const location = useLocation()
    const { pathname } = location
    const setRouteActive = (value) => {
        //history.push(value)
        console.log(value);
        navigate(value)
    }

    const tabs = [
        {
            key: '/index',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/about',
            title: 'About',
            icon: <AppOutline />,
        },
        {
            key: '/test',
            title: 'Dashboard',
            icon: <UnorderedListOutline />,
        }
    ]
    return (
        <div>
            <NavBar backArrow={false}>标题</NavBar>
            <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
            <Outlet />
        </div>
    );
}